<template>
  <div
    class="carousel"
    :style="{
      '--width': width,
      '--time': swiperOptions.autoplay.delay / 1000 + 's',
    }"
  >
    <template v-if="bannerList && bannerList.length > 0">
      <swiper
        v-bind="swiperOptions"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        @transitionStart="onTransitionStart"
      >
        <swiper-slide v-for="(item, index) in bannerList" :key="index"
          ><img :src="item.url" :title="item.title" alt=""
        /></swiper-slide>
      </swiper>
    </template>

    <!-- 左右按钮 -->
    <div class="swiper-btn">
      <button class="bus-prev"><i class="btn-prev">&lt;</i></button>
      <button class="bus-next"><i class="btn-next">&gt;</i></button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { imgUrl } from "@/api";
import { ref, reactive, nextTick } from "vue";
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";

// swiper配置：清晰了解
const swiperOptions: any = reactive({
  modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
  slidesPerView: "auto", // 解决最后一张切换到第一张中间的空白
  spaceBetween: 20, // 宽距
  centeredSlides: true, // 设置slide居中
  effect: "coverflow", // 切换效果
  coverflowEffect: {
    rotate: 0,
    depth: 0,
    slideShadows: false,
  }, // 阴影
  navigation: {
    nextEl: ".bus-next",
    prevEl: ".bus-prev",
  }, // 自定义分页器
  autoplay: {
    delay: 3000, // 自动切换的时间间隔
    stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换（loop模式下无效
    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
  },
  pagination: { clickable: true }, // 圆点分页
  loop: true, // 开启循环
  observer: true, // 监视器
  clickable: true, // 是否开启分页器
});

const width = ref<string>("0");
const timer = ref<number>(swiperOptions.autoplay.delay);

const bannerList: any = ref([]);
const getImgUrl = async () => {
  const res: any = await imgUrl();
  if (res.code == 200) {
    bannerList.value = res.data;
  }
};
getImgUrl();

// 进度条
const onChangeWidth = () => {
  width.value = "0";
  swiperOptions.autoplay.delay = 0;
  setTimeout(() => {
    nextTick(() => {
      swiperOptions.autoplay.delay = timer.value;
      width.value = "100%";
    });
  }, 100);
};

// 过渡开始时触发。可选Swiper实例作为参数，会首次加载一次
const onTransitionStart = () => {
  onChangeWidth();
};

const onSwiper = (swiper: any) => {
  console.log("onSwiper");
};
const onSlideChange = () => {
  console.log("slide change");
};

// 浏览器切换选项卡
document.addEventListener("visibilitychange", () => {
  // 回到当前tab标签
  if (document.visibilityState !== "hidden") {
    onChangeWidth();
  }
});
</script>

<style scoped lang="scss">
.carousel {
  position: relative;
  width: 100%;
  height: 650px;
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  position: relative;
  background-color: blue;
  color: #fff;
  font-size: 50px;
  > img {
    width: 100%;
    height: 100%;
  }
}

:deep(.swiper-pagination) {
  .swiper-pagination-bullet {
    overflow: hidden;
    border-radius: 20px !important;
    background-color: #fff;
    box-shadow: #000 0 0 2px 2px;
    opacity: 0.3;
  }

  .swiper-pagination-bullet-active {
    width: 100px !important;
    background-color: #fff;
    opacity: 0.8;
    box-shadow: none;
    // 进度条
    &::before {
      content: "";
      display: block;
      width: var(--width);
      height: 100%;
      // background-color: rgba(32, 160, 255, 0.8);
      background-color: rgba(0, 0, 0, 0.3);
      transition: width var(--time) ease;
    }
  }
}

.swiper-btn {
  background: #000;

  .bus-prev {
    left: 0;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
  }
  .bus-next {
    right: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
  }
  .bus-prev,
  .bus-next {
    cursor: pointer;
    overflow: hidden;
    z-index: 999;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 35px;
    line-height: 35px;
    border: none;
    background-color: rgba(0, 0, 0, 0.15);
    &:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
  .btn-prev {
    padding-right: 5px;
  }
  .btn-next {
    padding-left: 5px;
  }
  .btn-prev,
  .btn-next {
    color: #fff;
    font-size: 18px;
  }
}
</style>
